<template>
  <div class="camera_outer">
    <div class="publish">
      <video ref="video"></video>
      <canvas
        style="display:none"
        id="canvasCamera"
      ></canvas>
    </div>
    <h2 v-show="isshow">{{timer}}s后即将进入考试页面</h2>
    <ul>
      <li>
        <h3>线上考试注意事项:</h3>
      </li>
      <li>
        <div>1.</div>给电脑、手机、平板充满电，设定好考试时间提醒。
      </li>
      <li>
        <div>2.</div>关闭其他不相关的网页和界面，避免干扰。
      </li>
      <li>
        3.准备好清晰摄像头，请一定确保露出上半身。
      </li>
      <li>
        <div>4.</div><span>考试期间不允许遮挡、关闭监控摄像头，双手需放在桌面上胸前部位处，不允许佩戴口罩、墨镜、帽子，不允许佩戴耳机</span>
      </li>
      <li>
        <div>5.</div>考试途中不允许上厕所!!!请一定正视屏幕,保证上半身在摄影图像中，否则后果自负!!!
      </li>
    </ul>
    <div class="btn">
      <el-button type="primary" @click="getImg()">开始考试</el-button>
    </div>
  </div>
</template>
  <script>
export default {
  name: "Photo",
  data() {
    return {
      timer:5,
      isshow:false,
      mediaStreamTrack: {},
      video_stream: "", // 视频stream
      imgSrc: "", // 拍照图片
      canvas: null,
      context: null,
      id: "",
    };
  },
  mounted() {
    this.getCamera();
    this.id = this.$route.query.examCode;
  },
  methods: {
    // 调用打开摄像头功能
    getCamera() {
      // 获取 canvas 画布
      this.canvas = document.getElementById("canvasCamera");
      this.context = this.canvas.getContext("2d");
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 正常支持版本
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((stream) => {
          // 摄像头开启成功
          this.mediaStreamTrack =
            typeof stream.stop === "function" ? stream : stream.getTracks()[0];
          this.video_stream = stream;
          this.$refs.video.srcObject = stream;
          this.$refs.video.play();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    dataURLtoFile(dataurl, filename) {
      // 将 dataURL 转换为二进制数据
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      // 使用 Blob 构造函数创建一个 Blob 对象
      return new File([u8arr], filename, { type: mime });
    },
    // 获取图片
    getImg() {
      this.isshow = true
      this.context.drawImage(this.$refs.video, 0, 0, 200, 100);
      // 获取图片base64链接
      const imageBase64 = this.canvas.toDataURL("image/png");
      this.imgSrc = imageBase64;
      localStorage.setItem(
        "studyfile",
        JSON.stringify({ local_studyfile: [this.imgSrc] })
      );
      this.Inter = setInterval(() => {
        this.timer = this.timer-1
        if(this.timer<=0){
        clearInterval(this.Inter)
        this.Inter = null
        this.isshow = false
        this.$router.replace({ path: "/answer", query: { examCode: this.id } });
      }
      }, 1000);
      
      
    },
    // 关闭摄像头
    CloseCamera() {
      console.log('关闭摄像头');
      this.$refs.video.srcObject.getTracks()[0].stop();
    },
  },
  beforeDestroy() {  
    this.CloseCamera() 
  }
};
</script>
  <style lang="less" scoped>
.camera_outer {
  border-radius: 10px;
  padding: 10px;
  left: 50%;
  top: 50%;
  right: 0;
  transform: translate(-50%,-60%);
  position: fixed;
  width: 700px;
  background-color: #fff;
  .publish {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    video {
      width: 200px;
      height: 200px;
    }
    canvas {
      width: 100%;
      height: 300px;
    }
    .img_bg_camera {
      img {
        width: 300px;
        height: 200px;
      }
    }
  }
  ul{
    padding: 10px;
    margin-top: 50px;
    border-top: 1px solid #30759c;
    li{
      color: rgb(117, 25, 25);
      display: flex;
    }
    li:nth-child(n+2){
      margin-top: 10px;
      margin-left: 20px;
    }
    li span:nth-child(2){
      flex: 1;
    }
  }
 .btn{
  margin-top: 20px;
  text-align: center;
 }
  h2{
    text-align: center;
    color: red;
  }
}
</style>
